<template>
  <p>用户页</p>

  <el-row :gutter="20">

    <el-col :span="20" :xs="24">

      <ContentWrap>
        <el-form
          class="-mb-15px"
          :inline="true"
          label-width="68px"
        >

          <el-form-item>

            <el-button
              type="primary"
              plain
              @click="openForm('create')"
              v-hasPermi="['custom:user:create']"
            >
              <Icon icon="ep:plus" /> 新增
            </el-button>

            <el-button @click="handleQuery"><Icon icon="ep:search" />查询</el-button>

          </el-form-item>
        </el-form>
      </ContentWrap>

      <ContentWrap>
        <el-table v-loading="loading" :data="list">
          <el-table-column label="用户ID" align="center" key="id" prop="id" />
          <el-table-column label="用户编号" align="center" key="userNo" prop="userNo" />
          <el-table-column
            label="用户名称"
            align="center"
            prop="name"
            :show-overflow-tooltip="true"
          />
<!--          <el-table-column label="手机号" align="center" key="phone" prop="phone" />-->
          <el-table-column label="状态" key="status">
            <template #default="scope">
              <span>{{0 == scope.row.status ? "正常" : "禁用"}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="创建时间"
            align="center"
            prop="createTime"
            :formatter="dateFormatter"
            width="180"
          />

        </el-table>
      </ContentWrap>
    </el-col>
  </el-row>

  <!-- 添加或修改用户对话框 -->
  <UserForm ref="formRef" @success="getList" />


</template>


<script setup lang="ts">

import * as UserApi from '@/api/custom/user'
import {dateFormatter} from "@/utils/formatTime";
import UserForm from "@/views/custom/user/UserForm.vue";

defineOptions({ name: 'CustomUser' })

const loading = ref(true) // 列表的加载中
const list = ref([]) // 列表的数

/** 搜索按钮操作 */
const handleQuery = () => {
  getList()
}

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await UserApi.getUserInfo()
    console.log(data)
    list.value = data
  } finally {
    loading.value = false
  }
}

/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
  formRef.value.open(type, id)
}

/** 初始化 */
onMounted(() => {

  console.log('初始化------------------------')

  getList()
})

</script>
